<template>
  <section class="container">
    <!--  ��¼��  -->
    <div class="content position-relative">
      <div class="template position-absolute position-y-center">
        <div class="top bg-color-gray-ef font-color-main font-size-xl font-center padding-top-m padding-bottom-m">
          {{ queryCode === LoginPageCode.REGISTER ? "ע���Ա" : "��¼��Ա" }}
        </div>
        <form class="form padding-left-xl padding-right-xl padding-bottom-l padding-top-l">
          <div>
            <input v-model="formModule.temp.phone"
                   class="input"
                   maxlength="11"
                   placeholder="�������ֻ�����" />
          </div>
          <template v-if="queryCode === LoginPageCode.REGISTER">
            <div class="margin-top-m flex">
              <input v-model="formModule.temp.code"
                     class="flex-1 input"
                     placeholder="�������ֻ���֤��" />
              <div @click="formModule.handleGetCode()"
                   class="send font-size-smm font-color-white bg-color-main cursor-pointer flex flex-ai-c flex-js-c">
                ��ȡ��֤��
              </div>
            </div>
          </template>
          <div class="margin-top-m">
            <input v-model="formModule.temp.password"
                   class="input"
                   maxlength="12"
                   placeholder="�������¼����" />
          </div>
          <template v-if="queryCode === LoginPageCode.LOGIN">
            <div class="margin-top-m flex">
              <input v-model="formModule.temp.code"
                     class="flex-1 input"
                     placeholder="������ͼƬ��֤��" />
              <img @click="() => {}"
                   class="code cursor-pointer"
                   alt="��֤��"
                   title="���������֤��"
                   src="@/assets/images/banner.png" />
            </div>
          </template>
          <WarmCheckBox class="margin-top-m" v-model:active="formModule.isAgree">
            <div class="font-size-sm">
              <span class="font-color-main"
                    v-show="queryCode === LoginPageCode.LOGIN">
                ��ס�˺�
              </span>
              <p class="font-color-gray-9"
                 v-show="queryCode === LoginPageCode.REGISTER">
                �����Ķ���ͬ��
                <i class="font-color-main cursor-pointer" @click="popupModule.handleOpen('Agreement')">���û�Э�顷</i>
                ��
                <i class="font-color-main cursor-pointer" @click="popupModule.handleOpen('Policy')">����˽���ߡ�</i>
              </p>
            </div>
          </WarmCheckBox>
          <!--          @click="!formModule.isEmpty && formModule.handleSignIn(queryCode)"-->
          <div class="button margin-top-xl font-center font-size-smm font-color-white cursor-pointer"
               @click="formModule.handleSignIn"
               :class="[!formModule.isEmpty ? 'bg-color-main' : 'default']">
            ������¼
          </div>
        </form>
        <p class="bottom padding-left-xl bg-color-gray-ef font-color-main font-size-smm padding-top-m padding-bottom-m">
          <template v-if="queryCode === LoginPageCode.LOGIN">
            ������δע�ᣬ
            <span class="cursor-pointer"
                  @click="formModule.handleChangeTemplate(LoginPageCode.REGISTER)">
              ����ע���Ա
            </span>
          </template>
          <template v-else>
            ����ע�����Ա��
            <span class="cursor-pointer"
                  @click="formModule.handleChangeTemplate(LoginPageCode.LOGIN)">
              ȥ��¼
            </span>
          </template>
        </p>
      </div>
    </div>
    <WarmPopup v-model:show="popupModule.show"
               :width="1000"
               :height="700"
               @onConfirm="popupModule.onConfirm">
      <component :is="popupModule.component"></component>
    </WarmPopup>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";
import { getApp } from "@/common/hooks";
import { WarmPopup, WarmConfirm } from "@/components/Warm/Popup";
import { WarmMessage } from '@/components/Warm/Messages';
import { WarmCheckBox } from '@/components/Warm/Form';
import { LoginPageCode } from '@/common/utils/enum.ts';
import Agreement from '@/components/Protocol/Agreement.vue';
import Policy from '@/components/Protocol/Policy.vue';

export default defineComponent({
  name: "login",
  components: {
    WarmPopup,
    WarmCheckBox,
    Agreement,
    Policy
  },
  setup() {
    const { Route, System } = getApp(['Route']);

    const queryCode = ref<LoginPageCode>();

    /*��ģ��*/
    const formModule = reactive({
      isEmpty: true,
      isAgree: false,
      temp: {
        phone: '',
        password: '',
        code: '',
      },
      rule: {
        phone: [
          {
            regexp: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '��������ȷ�ĵ绰�����ʽ'
          }
        ],
        password: [
          {
            regexp: /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])[0-9a-zA-Z!@#$%^&*,\\._]{6,12}$/,
            message: '������������Сд��ĸ,���֣��ҳ��Ȳ�����6λ'
          }
        ]
      },
      handleSignIn: function () {
        WarmConfirm({
          text: "���",
          onConfirm: function (e) {
            console.log("ȷ��" + e)
          },
          onCancel: function (e) {
            console.log("ȡ��" + e)
          }
        });
        // const [pass, message] = System.Utils.validateForm(this.temp, this.rule);
        // if (!pass) return WarmMessage({ text: message, type: System.Enum.HintCode.ERROR });
        // try {
        //
        // } catch (e) {
        //
        // }
      },
      handleChangeTemplate: function (code: LoginPageCode) {
        System.Utils.resetTemp(this.temp);
        this.isAgree = false;
        queryCode.value = code;
      },
      handleGetCode: async function (saveLocal: boolean = false) {
        const [pass, message] = System.Utils.validateForm(this.temp, this.rule, 'phone');
        if (!pass) return WarmMessage({ text: message, type: System.Enum.HintCode.ERROR });
        if (!saveLocal) return System.Common?.getCode(this.temp.phone);
        const lastTime = window.localStorage.getItem(System.STORE_KEY.CODE_TIME);
        if (lastTime) {
          const time = Math.abs(new Date().getTime() - new Date(lastTime).getTime()) >= 10 * 60 * 1000;
          if (!time) return WarmMessage({ text: '��֤��10��֮����Ч!', type: System.Enum.HintCode.WARING });
          getCode(this.temp.phone);
        } else {
          getCode(this.temp.phone);
        }
        async function getCode(code: string) {
          await System.Common?.getCode(code, function () {
            window.localStorage.setItem(System.STORE_KEY.CODE_TIME, new Date().toString());
          });
        }
      },
      watchTemp: function () {
        watch([() => this.isAgree, () => this.temp], () => {
          const basePass = (this.temp.code.trim() && this.temp.password.trim() && this.temp.phone.trim());
          if (queryCode.value === LoginPageCode.LOGIN) {
            this.isEmpty = !basePass;
          } else {
            this.isEmpty = !(basePass && this.isAgree);
          }
        }, { deep: true });
      }
    });

    /*Э��ģ��*/
    const popupModule = reactive({
      show: false,
      component: '',
      handleOpen: function (component: 'Agreement' | 'Policy') {
        this.show = !this.show;
        this.component = component;
      },
      onConfirm: function () {
        formModule.isAgree = true;
      }
    });

    (() => {
      watch(() => Route?.query.code, () => formModule.handleChangeTemplate((Route as any).query.code), {
        immediate: true
      });
      formModule.watchTemp();
    })();

    return {
      queryCode,
      LoginPageCode,
      formModule,
      popupModule
    }
  }
})
</script>

<style lang="scss" scoped>
.content {
  height: 840Px;
  background: url("../../assets/images/loginBg.png") no-repeat;
  background-size: cover;

  .template {
    right: 220Px;
    width: 525Px;
    background: $color-white;

    .top {
      line-height: 1;
      font-weight: 400;
    }

    .form {
      .input {
        border: 1Px solid #DFDFDF;
        outline: none;
        padding: 18Px 25Px;
        width: 100%;
        box-sizing: border-box;
      }

      .send {
        width: 128Px;
      }

      .code {
        width: 128Px;
        height: 56Px;
        object-fit: cover;
      }

      .button {
        font-weight: 400;
        line-height: 60Px;

        &.default {
          background-color: #4E4E4E;
        }
      }
    }

    .bottom {
      line-height: 1;
      font-weight: 400;

      span {
        color: #F00;
      }
    }
  }
}
</style>
